import { FormSchema } from '@/components/Form';
import { useDictStore } from '@/store/modules/dict';
import { renderImage, renderOptionTag } from '@/utils';
import { cloneDeep } from 'lodash-es';
import { h, ref } from 'vue';

const dict = useDictStore();

export class State {
  public id = 0; // ID
  public name = ''; // 商品名称
  public type = 1; // 商品属性
  public createdAt = ''; // 上线时间
  public status = 1; // 商品状态
  public mainImage = []; // 商品主图
  public benefitPoints = []; // 商品利益点
  public integral = 0; // 积分价格
  public integralLogistics = 0; // 物流价格
  public costPrice = 0; // 成本价
  public salePrice = 0; // 销售价
  public marketPrice = 0; // 市场价格
  public isMemberOnly = '0'; // 是否仅会员购买：0-否、1-是
  public categoryId: string | number[] = ''; //商品分类
  public scene = 1; // 适用场景
  public storeId: string | number[] = ''; // 门店
  public storeJson: { label: string; value: number }[] = [];
  public description = ''; // 描述
  public rules = ''; // 规则说明
  public images = []; // 配图
  public updatedAt = ''; // 更新时间
  public restrictionType = 0; // 限购
  public cycle = null; // 时间周期
  public quantityLimit = 0; // 数量限制
  public salesType = 1; // 销氪/服务人员信息
  public agentId = null; // 销氪ID
  public storeName = '';
  public qrCode: string = '';
  public vipProportion: number = 0;
  public dailyPurchaseLimit: number = 0;
  constructor(state?: Partial<State>) {
    if (state) {
      Object.assign(this, state);
    }
  }
}

export function newState(state: State | Record<string, any> | null): State {
  if (state !== null) {
    if (state instanceof State) {
      return cloneDeep(state);
    }
    return new State(state);
  }
  return new State();
}

// 表单验证规则
export const rules = {
  name: {
    required: true,
    trigger: ['blur', 'input'],
    type: 'string',
    message: '请输入商品名称',
  },
  type: {
    required: true,
    trigger: ['blur', 'input'],
    type: 'number',
    message: '请输入商品属性',
  },
};

// 表格搜索表单
export const schemas = ref<FormSchema[]>([
  {
    field: 'name',
    component: 'NInput',
    label: '商品名称',
    componentProps: {
      placeholder: '请输入商品名称',
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'storeName',
    component: 'NInput',
    label: '门店名称',
    componentProps: {
      placeholder: '请输入门店名称',
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'type',
    component: 'NSelect',
    label: '商品属性',
    defaultValue: null,
    componentProps: {
      placeholder: '请选择商品属性',
      options: dict.getOption('xxb_sp_sx'),
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'status',
    component: 'NSelect',
    label: '商品状态',
    defaultValue: null,
    componentProps: {
      placeholder: '请选择商品状态',
      options: dict.getOption('xxb_sp_zt'),
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'adcode',
    component: 'CitySelector',
    label: '地区筛选',
    defaultValue: null,
    componentProps: {
        checkStrategy: "all"
    },
  },
]);

// 表格列
export const columns = [
  {
    title: 'ID',
    key: 'id',
    align: 'left',
    width: 80,
  },
  {
    title: '商品主图',
    key: 'mainImage',
    align: 'center',
    width: 80,
    render(row: State) {
      return renderImage(row.mainImage? row.mainImage[0] : "")
    },
  },
  {
    title: '商品名称',
    key: 'name',
    align: 'left',
    width: -1,
  },
  {
    title: '门店',
    key: 'storeName',
    align: 'left',
    width: -1,
    render(row: State) {
      // 字符串中包含 \n ，需要在列表中显示换行
      return row.storeName.split('\n').map((item: string, index: number) => {
        return h('div', { key: index }, item);
      });
    },
  },
  {
    title: '会员分销比例',
    key: 'vipProportion',
    align: 'center',
    width: 130,
    render(row: State) {
      return row.type === 3 ? row.vipProportion ? row.vipProportion + '%' : 0 + '%' : '';
    },
  },
  {
    title: '商品属性',
    key: 'type',
    align: 'center',
    width: 100,
    render(row: State) {
      return renderOptionTag('xxb_sp_sx', row.type);
    },
  },
  {
    title: '商品状态',
    key: 'status',
    align: 'center',
    width: 100,
    render(row: State) {
      return renderOptionTag('xxb_sp_zt', row.status);
    },
  },
  {
    title: '上线时间',
    key: 'createdAt',
    align: 'center',
    width: 170,
    defaultSortOrder: 'descend',
    sorter: 'default'
  },

];

export const cateColumns = [
   {
    title: 'ID',
    key: 'id',
    align: 'left',
    width: 80,
  },
  {
    title: '名称',
    key: 'name',
    align: 'left',
    width: -1,
  },
  {
    title: '状态',
    key: 'status',
    align: 'center',
    width: 100,
    render(row) {
      return row.status === 1 ? '启用' : '禁用';
    },
  },
   {
    title: '排序',
    key: 'sort',
    align: 'left',
    width: 80,
  },
]

// 加载字典数据选项
export function loadOptions() {
  dict.loadOptions(['xxb_sp_zt','xxb_fl_zt', 'xxb_sp_sx', 'xxb_sp_sycj', 'xxb_sp_xglx', 'xxb_sp_sjzq', 'xxb_sp_xxlx']);
}
